<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商家管理系统</title>
    <script src="../js/jquery-2.1.4.js"></script>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        body {
            margin: 0px 0px;
        }

        #div {
            width: 100%;
            border: 1px solid rgb(225, 225, 225);
        }

        a:link {
            color: #303133;
            text-decoration: none;
        }

        a:visited {
            color: #303133;
            text-decoration: none;
        }

        a:active {
            color: #303133;
            text-decoration: none;
        }

        .top {
            height: 100px;
            background-color: rgb(84, 119, 182);
        }

        #user {
            width: 150px;
            float: left;
            color: rgb(38, 216, 218);
            margin-top: 40px;
            font-size: 16px;
        }

        #end {
            float: right;
            margin-top: 30px;
            margin-left: 450px;
        }

        .left {
            width: 200px;
            height: 900px;
            float: left;

        }

        .right {
            width: 900px;
            height: 900px;
            float: left;

        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 900px;
        }

        .iframe {
            width: 900px;
            height: 900px;
        }
    </style>
</head>
<body>
<div id="div">
    <!--头部-->
    <div class="top">
        <div id="user">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><b><i class='el-icon-user-solid'></i>:</b></span><b><span
                v-text="username"></span></b>
        </div>

        <button id="end" type="button" class="btn btn-danger"><a style="color:white;text-decoration:none"
                                                                 href="/logout">退出</a></button>
    </div>


    <!--功能块-->
    <div class="left">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse">
            <!--商品管理功能栏-->
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-grid"></i>
                    <span slot="title">商品管理功能</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">商品管理功能</span>
                    <el-menu-item index="1-1-1">
                        <a target="main" href="/templates/merchant/addproduct.html">商品的上架</a></el-menu-item>

                </el-menu-item-group>
            </el-submenu>

            <!--订单管理栏-->
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">订单管理栏</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">订单管理栏</span>
                    <el-menu-item index="2-1-1">
                        <a target="main" href="/templates/merchant/allOrder.html">订单的查询</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <!--门店收益查询-->
         <!--   <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-marketing"></i>
                    <span slot="title">门店</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">门店收益查询</span>
                    <el-menu-item index="3-1-1">门店收益查询</el-menu-item>
                </el-menu-item-group>
            </el-submenu>-->

            <!--售后管理-->
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">售后管理</span>
                </template>
                <el-menu-item-group>
                    <span slot="title">售后管理</span>
                    <el-menu-item index="4-1-1">
                        <a target="main" href="/templates/merchant/allReturnGoods.html">审核退货信息</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
    <!--内容块-->
    <div class="right">
        <iframe name="main" class="iframe" frameborder="0">
        </iframe>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#div',
        data: {
            isCollapse: true,
        },
        methods: {
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            }
        }
    })
</script>
</html>